<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红外温度分析系统 - Web版</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="static/css/style.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'brand-green': '#059669',
                        'brand-teal': '#0d9488'
                    },
                    fontFamily: {
                        'sans': ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif']
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 主容器 -->
    <div class="min-h-screen">
        <!-- 头部 -->
        <header class="bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-xl">
            <div class="container mx-auto px-4 py-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <div class="bg-white/20 rounded-lg p-2">
                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                            </svg>
                        </div>
                        <h1 class="text-2xl font-bold">红外温度分析系统</h1>
                    </div>
                    <div class="text-emerald-100">
                        <span class="text-sm">Web版标注工具</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                
                <!-- 左侧操作面板 -->
                <div class="lg:col-span-1 space-y-6">
                    
                    <!-- 图片上传区域 -->
                    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                        <h2 class="text-xl font-semibold text-gray-900 mb-4">上传图片</h2>
                        <div id="upload-area" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-emerald-400 transition-all duration-300 cursor-pointer">
                            <div class="upload-content">
                                <svg class="w-12 h-12 mx-auto text-gray-400 mb-4" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <p class="text-gray-600 mb-2">点击上传或拖拽图片到此处</p>
                                <p class="text-sm text-gray-500">支持 JPG、PNG、RJPEG 格式</p>
                            </div>
                            <input type="file" id="image-input" class="hidden" accept=".jpg,.jpeg,.png,.rjpeg,.r.jpg" />
                        </div>
                        
                        <!-- 图片信息 -->
                        <div id="image-info" class="mt-4 text-sm text-gray-600 hidden">
                            <p><span class="font-medium">文件名:</span> <span id="file-name"></span></p>
                            <p><span class="font-medium">文件大小:</span> <span id="file-size"></span></p>
                            <p><span class="font-medium">图片尺寸:</span> <span id="image-dimensions"></span></p>
                        </div>
                    </div>

                    <!-- 区域管理 -->
                    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                        <h2 class="text-xl font-semibold text-gray-900 mb-4">区域管理</h2>
                        
                        <!-- 模式切换 -->
                        <div class="mb-4">
                            <div class="flex space-x-2">
                                <button id="region-mode-btn" class="flex-1 bg-gradient-to-r from-emerald-600 to-teal-600 text-white px-3 py-2 rounded-lg font-medium text-sm transition-all duration-300">
                                    区域分析
                                </button>
                                <button id="calibration-mode-btn" class="flex-1 bg-gray-200 text-gray-700 px-3 py-2 rounded-lg font-medium text-sm hover:bg-gray-300 transition-all duration-300">
                                    温度标定
                                </button>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="flex space-x-3 mb-4">
                            <button id="analyze-btn" class="flex-1 bg-gradient-to-r from-emerald-600 to-teal-600 text-white px-4 py-2 rounded-lg font-medium hover:from-emerald-700 hover:to-teal-700 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                分析区域
                            </button>
                            <button id="clear-regions-btn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-emerald-50 hover:border-emerald-300 transition-all duration-300 disabled:opacity-50" disabled>
                                清空
                            </button>
                        </div>

                        <!-- 使用说明 -->
                        <div id="usage-instructions" class="bg-emerald-50 border border-emerald-200 rounded-lg p-4 mb-4">
                            <div id="region-instructions" class="text-sm text-emerald-800">
                                <span class="font-medium">区域分析模式：</span><br>
                                1. 上传图片后，在图片上拖拽选择分析区域<br>
                                2. 可选择多个区域进行对比分析<br>
                                3. 点击"分析区域"获取温度数据
                            </div>
                            <div id="calibration-instructions" class="text-sm text-blue-800 hidden">
                                <span class="font-medium">温度标定模式：</span><br>
                                1. 上传图片后，点击已知温度的位置<br>
                                2. 输入该位置的准确温度值<br>
                                3. 添加多个标定点提高测量精度
                            </div>
                        </div>
                        
                        <!-- 区域列表 -->
                        <div id="regions-panel" class="space-y-2">
                            <h3 class="font-medium text-gray-900">选中区域 (<span id="region-count">0</span>)</h3>
                            <div id="regions-list" class="space-y-2 max-h-48 overflow-y-auto">
                                <!-- 区域项目将动态添加 -->
                            </div>
                        </div>

                        <!-- 标定点列表 -->
                        <div id="calibration-panel" class="space-y-2 hidden">
                            <div class="flex items-center justify-between">
                                <h3 class="font-medium text-gray-900">标定点 (<span id="calibration-count">0</span>)</h3>
                                <div class="flex space-x-2">
                                    <button id="grid-auto-calibrate-btn" class="bg-gradient-to-r from-green-600 to-green-700 text-white px-3 py-1 rounded text-xs hover:from-green-700 hover:to-green-800 transition-all duration-300">
                                        网格自动标定
                                    </button>
                                    <button id="auto-calibrate-btn" class="bg-gradient-to-r from-purple-600 to-purple-700 text-white px-3 py-1 rounded text-xs hover:from-purple-700 hover:to-purple-800 transition-all duration-300">
                                        R-JPEG自动标定
                                    </button>
                                </div>
                            </div>
                            <div id="calibration-list" class="space-y-2 max-h-48 overflow-y-auto">
                                <!-- 标定点项目将动态添加 -->
                            </div>
                            <!-- 清空标定按钮 -->
                            <div class="mt-3 border-t pt-3">
                                <button id="clear-calibration-btn" class="w-full px-3 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 hover:border-red-400 transition-all duration-300 text-sm disabled:opacity-50" disabled>
                                    清空所有标定点
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 分析状态 -->
                    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                        <h2 class="text-xl font-semibold text-gray-900 mb-4">分析状态</h2>
                        <div id="status-info" class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600">API状态:</span>
                                <span id="api-status" class="text-gray-500">未连接</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">已上传图片:</span>
                                <span id="upload-status" class="text-gray-500">无</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">选中区域:</span>
                                <span id="selected-regions" class="text-gray-500">0个</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧图片显示区域 -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-semibold text-gray-900">图片标注</h2>
                            <div class="flex space-x-2">
                                <button id="reset-zoom-btn" class="px-3 py-1 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition-all duration-300 disabled:opacity-50" disabled>
                                    重置缩放
                                </button>
                            </div>
                        </div>
                        
                        <!-- 画布容器 -->
                        <div id="canvas-container" class="relative border border-gray-200 rounded-lg overflow-hidden bg-gray-100 min-h-96">
                            <div id="placeholder" class="flex items-center justify-center h-96 text-gray-500">
                                <div class="text-center">
                                    <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                    <p class="text-lg font-medium mb-2">请上传图片开始分析</p>
                                    <p class="text-sm text-gray-400">支持热成像RJPEG、JPG、PNG格式</p>
                                </div>
                            </div>
                            <canvas id="image-canvas" class="absolute top-0 left-0 cursor-crosshair hidden"></canvas>
                            <canvas id="overlay-canvas" class="absolute top-0 left-0 pointer-events-none hidden"></canvas>
                        </div>
                        
                        <!-- 画布工具栏 -->
                        <div id="canvas-toolbar" class="mt-4 flex items-center justify-between text-sm text-gray-600 hidden">
                            <div class="flex space-x-4">
                                <span>坐标: <span id="mouse-coords" class="font-mono">-</span></span>
                                <span>缩放: <span id="zoom-level" class="font-mono">100%</span></span>
                            </div>
                            <div class="text-emerald-600">
                                <span class="font-medium">拖拽鼠标选择分析区域</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分析结果区域 -->
            <div class="mt-8">
                <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-6">分析结果</h2>
                    
                    <!-- 加载状态 -->
                    <div id="loading-indicator" class="hidden">
                        <div class="flex items-center justify-center py-8">
                            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-600"></div>
                            <span class="ml-3 text-gray-600">正在分析温度数据...</span>
                        </div>
                    </div>
                    
                    <!-- 结果卡片容器 -->
                    <div id="results-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 结果卡片将动态添加 -->
                    </div>
                    
                    <!-- 空状态 -->
                    <div id="empty-results" class="text-center py-8 text-gray-500">
                        <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                        <p class="text-lg font-medium mb-2">暂无分析结果</p>
                        <p class="text-sm text-gray-400">选择图片区域并点击分析按钮</p>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 mt-16">
            <div class="container mx-auto px-4 py-6">
                <div class="flex items-center justify-between text-sm text-gray-600">
                    <div>
                        <span>红外温度分析系统 Web版</span>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span>API状态: <span id="footer-api-status" class="font-medium">检查中...</span></span>
                        <span>版本: v1.0</span>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- 错误提示模态框 -->
    <div id="error-modal" class="fixed inset-0 bg-black/80 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6">
                <div class="flex items-center mb-4">
                    <svg class="w-6 h-6 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-900">错误提示</h3>
                </div>
                <p id="error-message" class="text-gray-700 mb-6"></p>
                <button id="close-error-btn" class="w-full bg-gradient-to-r from-emerald-600 to-teal-600 text-white py-2 px-4 rounded-lg hover:from-emerald-700 hover:to-teal-700 transition-all duration-300">
                    确定
                </button>
            </div>
        </div>
    </div>

    <!-- 成功提示模态框 -->
    <div id="success-modal" class="fixed inset-0 bg-black/80 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6">
                <div class="flex items-center mb-4">
                    <svg class="w-6 h-6 text-emerald-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-900">操作成功</h3>
                </div>
                <p id="success-message" class="text-gray-700 mb-6"></p>
                <button id="close-success-btn" class="w-full bg-gradient-to-r from-emerald-600 to-teal-600 text-white py-2 px-4 rounded-lg hover:from-emerald-700 hover:to-teal-700 transition-all duration-300">
                    确定
                </button>
            </div>
        </div>
    </div>

    <!-- 标定温度输入模态框 -->
    <div id="calibration-input-modal" class="fixed inset-0 bg-black/80 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6">
                <div class="flex items-center mb-4">
                    <svg class="w-6 h-6 text-blue-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-900">添加标定点</h3>
                </div>
                <div class="mb-4">
                    <p class="text-gray-600 mb-3">请输入坐标 <span id="calibration-coords" class="font-mono text-blue-600"></span> 处的准确温度值：</p>
                    
                    <!-- R-JPEG自动获取温度 -->
                    <div class="mb-3 p-3 bg-purple-50 border border-purple-200 rounded-lg">
                        <div class="flex items-center justify-between mb-2">
                            <label class="text-sm font-medium text-purple-800">R-JPEG自动获取温度</label>
                            <button id="rjpeg-auto-temp-btn" class="bg-purple-600 text-white px-3 py-1 rounded text-xs hover:bg-purple-700 transition-all duration-300">
                                选择R-JPEG文件
                            </button>
                        </div>
                        <input type="file" id="rjpeg-temp-file-input" accept=".rjpeg,.r.jpg" class="hidden">
                        <div id="rjpeg-temp-result" class="hidden">
                            <div class="flex items-center space-x-2 text-sm">
                                <span class="text-purple-700">TSDK分析结果:</span>
                                <span id="rjpeg-temp-value" class="font-mono font-bold text-purple-800"></span>
                                <button id="use-rjpeg-temp-btn" class="bg-green-600 text-white px-2 py-1 rounded text-xs hover:bg-green-700">
                                    使用此温度
                                </button>
                            </div>
                        </div>
                        <div id="rjpeg-temp-loading" class="hidden text-sm text-purple-600">
                            正在分析R-JPEG文件...
                        </div>
                        <div id="rjpeg-temp-error" class="hidden text-sm text-red-600">
                            <!-- 错误信息 -->
                        </div>
                    </div>
                    
                    <div class="relative">
                        <input type="number" id="calibration-temp-input" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="请输入温度值或使用R-JPEG自动获取" step="0.1">
                        <span class="absolute right-3 top-3 text-gray-500">°C</span>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <button id="cancel-calibration-btn" class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-300">
                        取消
                    </button>
                    <button id="confirm-calibration-btn" class="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white py-2 px-4 rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-300">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- R-JPEG自动标定模态框 -->
    <div id="auto-calibrate-modal" class="fixed inset-0 bg-black/80 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full p-6">
                <div class="flex items-center mb-4">
                    <svg class="w-6 h-6 text-purple-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-900">R-JPEG自动标定</h3>
                </div>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">上传R-JPEG热成像文件</label>
                        <input type="file" id="rjpeg-file-input" accept=".rjpeg,.r.jpg" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                        <p class="text-xs text-gray-500 mt-1">支持 .rjpeg 和 .r.jpg 格式</p>
                    </div>
                    
                    <div id="rjpeg-preview-area" class="hidden">
                        <label class="block text-sm font-medium text-gray-700 mb-2">点击图片选择标定点位置</label>
                        <div class="border border-gray-300 rounded-lg p-4 bg-gray-50">
                            <div id="rjpeg-canvas-container" class="relative bg-white rounded border overflow-hidden" style="max-height: 400px;">
                                <canvas id="rjpeg-canvas" class="block cursor-crosshair"></canvas>
                            </div>
                        </div>
                        <div class="mt-2">
                            <p class="text-sm text-gray-600">已选择 <span id="auto-calibration-points-count">0</span> 个标定点</p>
                            <div id="auto-calibration-points-list" class="mt-2 space-y-1 max-h-24 overflow-y-auto">
                                <!-- 选择的标定点列表 -->
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex space-x-3 mt-6">
                    <button id="cancel-auto-calibrate-btn" class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-300">
                        取消
                    </button>
                    <button id="confirm-auto-calibrate-btn" class="flex-1 bg-gradient-to-r from-purple-600 to-purple-700 text-white py-2 px-4 rounded-lg hover:from-purple-700 hover:to-purple-800 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        开始自动标定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 网格自动标定模态框 -->
    <div id="grid-auto-calibrate-modal" class="fixed inset-0 bg-black/80 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6">
                <div class="flex items-center mb-4">
                    <svg class="w-6 h-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-900">网格自动标定</h3>
                </div>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">选择网格密度</label>
                        <select id="grid-size-select" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            <option value="5x4">粗糙 (5×4 = 20点)</option>
                            <option value="8x6" selected>标准 (8×6 = 48点)</option>
                            <option value="10x8">精细 (10×8 = 80点)</option>
                            <option value="12x10">超精细 (12×10 = 120点)</option>
                            <option value="15x12">极精细 (15×12 = 180点)</option>
                            <option value="20x16">最大密度 (20×16 = 320点)</option>
                        </select>
                        <p class="text-xs text-gray-500 mt-1">网格越密集，标定精度越高，但处理时间越长</p>
                    </div>
                    
                    <div>
                        <label class="flex items-center">
                            <input type="checkbox" id="full-coverage-checkbox" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                            <span class="ml-2 text-sm text-gray-700">全图覆盖模式</span>
                        </label>
                        <p class="text-xs text-gray-500 mt-1">勾选后网格点将覆盖到图像边缘，获取更完整的温度范围</p>
                    </div>
                    
                    <div id="grid-file-section">
                        <div id="grid-current-file" class="hidden bg-blue-50 border border-blue-200 rounded-lg p-3">
                            <div class="flex items-center space-x-2">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                                <span class="text-sm text-blue-800">
                                    <span class="font-medium">当前图片：</span>
                                    <span id="grid-current-filename" class="font-mono"></span>
                                </span>
                            </div>
                            <p class="text-xs text-blue-600 mt-1">将使用当前已上传的R-JPEG图片进行网格标定</p>
                        </div>
                        
                        <div id="grid-upload-section" class="hidden">
                            <label class="block text-sm font-medium text-gray-700 mb-2">上传R-JPEG热成像文件</label>
                            <input type="file" id="grid-rjpeg-file-input" accept=".rjpeg,.r.jpg" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            <p class="text-xs text-gray-500 mt-1">当前图片不是R-JPEG格式，需要上传R-JPEG文件</p>
                        </div>
                    </div>
                    
                    <div id="grid-preview" class="hidden bg-green-50 border border-green-200 rounded-lg p-3">
                        <p class="text-sm text-green-800">
                            <span class="font-medium">预览：</span>将在图片上生成 <span id="grid-points-count" class="font-bold">48</span> 个均匀分布的标定点
                        </p>
                    </div>
                </div>
                
                <div class="flex space-x-3 mt-6">
                    <button id="cancel-grid-calibrate-btn" class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-300">
                        取消
                    </button>
                    <button id="confirm-grid-calibrate-btn" class="flex-1 bg-gradient-to-r from-green-600 to-green-700 text-white py-2 px-4 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300">
                        开始网格标定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript文件 -->
    <script src="static/js/canvas.js"></script>
    <script src="static/js/main.js"></script>
</body>
</html>